<template>
  <div>
    <div style="padding: 15px">
    <el-row :span="24">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>进行中订单</span>
            </div>
          </template>
          <el-table :data="orderList" style="width: 100%">
            <el-table-column prop="orderName" label="订单名称" width="180" />
            <el-table-column prop="orderType" label="订单类型" width="180" />
            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button type="text" icon="View" @click="viewProcess(scope.row)">查看进度</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>已购资源</span>
            </div>
          </template>
          <el-scrollbar height="600px">
            <p v-for="(item, index) in holdData" :key="item" class="scrollbar-demo-item">
              <el-row :span="24">
                <el-col :span="2"></el-col>
                <el-col :span="22">
                  <el-card :body-style="{ padding: '5px' }">
                    <template #header>
                      <div class="card-header">
                        <span>{{ item.title }}</span>
                      </div>
                    </template>
                    <el-image style="width: 200px; height: 124px" :src="item.avatar" fit="scale-down" />
                    <div style="padding: 14px">
                      <span>{{ item.summary }}</span>
                      <div class="bottom" style="padding: 5px">
                        <el-button type="primary" text class="button" @click="viewRsr(item)">查看</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </p>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <process-view :order="selectedOrder" ref="processRef"></process-view>
  </div>
 
</template>

<script setup name="Index">
import ProcessView from "./components/ProcessView";
// 需要对订单列表查询
import { queryList } from "@/api/order";
import { grantedCms } from "@/api/grant";
import useUserStore from "@/store/modules/user";
import emitter from "@/utils/mitt";
const router = useRouter();
const { proxy } = getCurrentInstance();
const orderList = ref([]);
const selectedOrder = ref({});
const userId = ref(useUserStore().userId);
// 已购资源
const holdData = ref([]);
// 查看
function viewRsr(row) {
  //proxy.$router.push({ path: "/cms/article/detail/" + row.id });
  router.push("/cms/article/detail/" + row.id);
}
// 查询已购资源
function getHold() {
  grantedCms().then((res) => {
    console.log(res);
    holdData.value = res;
  });
}
// 点击事件
function viewProcess(row) {
  selectedOrder.value = row;
  proxy.$refs["processRef"].show();
  proxy.$refs["processRef"].processQuery(row.id);
}
function getList() {
  const queryParamsCustoemr = {
    pageSize: 100,
    pageNum: 1,
    status: 1,
    customerId: userId.value,
  };
  queryList(queryParamsCustoemr).then((res) => {
    console.log(res);
    orderList.value = orderList.value.concat(res.content);
    //emitter.emit("helloword");
  });
  const queryParamsProducer = {
    pageSize: 100,
    pageNum: 1,
    status: 1,
    producerId: userId.value,
  };
  queryList(queryParamsProducer).then((res) => {
    console.log(res);
    orderList.value = orderList.value.concat(res.content);
    //emitter.emit("helloword");
  });
}
getHold();
getList();
</script>
